<template>
    <div id="discovery">
        <header>
            <i @click="goback" class="iconfont">&#xe618;</i>
            <span>发现</span>
        </header>
        <div class="entry">
            <div :key="index" :class="'platform' + index" v-for="(item, index) in platform['1']">
                <h2 :style="'color: #' + item.title_color">{{item.title}}</h2>
                <p>{{item.subtitle}}</p>
                <img :src="'https://fuss10.elemecdn.com/' + item.main_pic_hash.substr(0,1) + '/' + item.main_pic_hash.substr(1,2) + '/'
                + item.main_pic_hash.substr(3) + (item.main_pic_hash.slice(-3) == 'png' ? '.png' : '.jpeg') + '?imageMogr/format/webp/'" alt="..">
            </div>
        </div>
        <img class="activity" :src="platform['2'] ? 'https://fuss10.elemecdn.com/' + platform['2'][0].sub_pic_hash.substr(0,1) + '/' + platform['2'][0].sub_pic_hash.substr(1,2) + '/'
        + platform['2'][0].sub_pic_hash.substr(3) + (platform['2'][0].sub_pic_hash.slice(-3) == 'png' ? '.png' : '.jpeg') + '?imageMogr/format/webp/':''" alt="..">
        <section>
            <div class="activity-header">
                <span class="line left"></span>
                <svg class="activity-icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#nice">
                        <svg viewBox="0 0 34 33" id="nice" width="100%" height="100%">
                            <g fill="#F12C2C" fill-rule="evenodd">
                                <path d="M19.1 10s.404-1.959.685-3.294l.068-.323a472.237 472.237 0 0 1 .83-3.832l.077-.352C21.016 1.036 20.194 0 19.01 0H14.49c-.625 0-1.284.377-1.606.915l-5.742 9.57L8 10H2.003A1.995 1.995 0 0 0 0 11.999V31C0 32.106.9 33 2.003 33h23c1.548 0 3.082-1.157 3.507-2.645l4.63-16.204C33.776 11.923 32.32 10 30 10H19.1zM18 12h12c.993 0 1.488.653 1.217 1.601l-4.63 16.205c-.18.629-.929 1.194-1.584 1.194h-23L2 11.999C2 11.996 8 12 8 12h.566l.291-.486 5.743-9.57c-.037.061-.028.056-.109.056h4.518c-.1 0-.22-.152-.202-.233l-.078.354a513.863 513.863 0 0 0-.832 3.848l-.069.325c-.284 1.349-.51 2.46-.657 3.255-.087.465-.146.818-.177 1.058a2.394 2.394 0 0 0-.026.41c.004.078.004.078.027.21.039.185.039.185.349.563.717.292.656.21.656.21z"></path>
                                <path d="M7 10h2v22H7z"></path>
                            </g>
                        </svg>
                    </use>
                </svg>
                美食热推
                <span class="line right"></span>
            </div>
            <p class="activity-sub-title">你的口味，我都懂得</p>
            <div class="activity-body">
                <a :key="index" class="discover-food" v-for="(item, index) in hotfood">
                    <img :src="'https://fuss10.elemecdn.com/' + item.foods[0].image_hash.substr(0,1) + '/' + item.foods[0].image_hash.substr(1,2) + '/'
                    + item.foods[0].image_hash.substr(3) + (item.foods[0].image_hash.slice(-3) == 'png' ? '.png' : '.jpeg') + '?imageMogr/format/webp/'">
                    <div>
                        <p class="food-name ui-ellipsis">{{item.foods[0].name}}</p>
                        <div class="food-price">
                            <span class="yuan">¥{{item.foods[0].price}}</span>
                        </div>
                    </div>
                </a>
            </div>
            <p class="activity-more">查看更多&nbsp;&gt;</p>
        </section>
        <section>
            <div class="activity-header">
                <span class="line left"></span>
                <svg class="activity-icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#alarm"></use>
                    <svg viewBox="-4 3 30 30" id="alarm" width="100%" height="100%"><g id="alarm_页面"><g id="alarm_发现页_新增天天特价_确认" transform="translate(-31 -1587)"><g id="alarm_商品" transform="translate(-2 1556)"><g id="alarm_Page-1"><path d="M10 29.9c-7.2 0-13-5.8-13-13 0-2 .4-3.9 1.3-5.7C.5 6.7 5 3.9 10 3.9c7.2 0 13 5.8 13 13s-5.8 13-13 13zM.1 12.1C-.7 13.6-1 15.2-1 16.9c0 6.1 4.9 11 11 11s11-4.9 11-11-4.9-11-11-11c-4.3 0-8.1 2.3-9.9 6.2z" class="st0" transform="translate(34 32)"></path><path d="M-1 12.1c-1.8-.9-3-2.7-3-4.8C-4 4.4-1.6 2 1.3 2c2 0 3.8 1.1 4.7 2.8l-1.8 1C3.7 4.7 2.5 4 1.3 4-.5 4-2 5.5-2 7.3c0 1.3.7 2.4 1.8 3l-.8 1.8zM21 11.8l-1-1.7c1-.6 1.6-1.7 1.6-2.8 0-1.8-1.5-3.3-3.3-3.3-1.3 0-2.5.8-3.1 2l-1.8-.8c.8-2 2.8-3.3 4.9-3.3 2.9 0 5.3 2.4 5.3 5.3-.1 2-1 3.7-2.6 4.6zM14.3 20.2h-4.2c-.6 0-1-.4-1-1v-8.1c0-.6.4-1 1-1s1 .4 1 1v7.1h3.2c.6 0 1 .4 1 1s-.4 1-1 1zM-1.2 32c-.2 0-.5-.1-.7-.3-.4-.4-.4-1-.1-1.4l4-4.5c.4-.4 1-.4 1.4-.1.4.4.4 1 .1 1.4l-4 4.5c-.2.3-.4.4-.7.4zM21.5 32c-.3 0-.5-.1-.7-.3l-4-4.5c-.4-.4-.3-1 .1-1.4.4-.4 1-.3 1.4.1l4 4.5c.4.4.3 1-.1 1.4-.2.1-.4.2-.7.2z" class="st0" transform="translate(34 32)"></path></g></g></g></g></svg>
                </svg>
                限时好礼
                <span class="line right"></span>
            </div>
            <p class="activity-sub-title">小积分换豪礼</p>
            <div class="activity-body">
                <a class="discover-food">
                    <img src="https://fuss10.elemecdn.com/0/53/47a80976e90c99f40b745cde5246fjpeg.jpeg?imageMogr/format/webp/">
                    <div>
                        <p class="food-name">iPhone 7 32G</p>
                        <div class="food-price">
                            <span class="price ui-ellipsis">
                                <span>499积分</span>
                            </span>
                            <del class="original-price ui-ellipsis">¥4499</del>
                        </div>
                    </div>
                    <span class="discount">抽奖活动</span>
                </a>
                <a class="discover-food">
                    <img src="https://fuss10.elemecdn.com/a/a2/206f0d7fa5af4b349b641fa35e730jpeg.jpeg?imageMogr/format/webp/">
                    <div>
                        <p class="food-name">7元饿了么红包</p>
                        <div class="food-price">
                            <span class="price ui-ellipsis">
                                <span>3500积分</span>
                            </span>
                            <del class="original-price ui-ellipsis">¥7</del>
                        </div>
                    </div>
                    <span class="discount">0元兑换</span>
                </a>
                <a class="discover-food">
                    <img src="https://fuss10.elemecdn.com/2/76/4ecce2ffe6ec8d7e31f21b12b59f0jpeg.jpeg?imageMogr/format/webp/">
                    <div>
                        <p class="food-name">翻出你的跑步机</p>
                        <div class="food-price">
                            <span class="price ui-ellipsis">
                                <span>399积分</span>
                            </span>
                        </div>
                    </div>
                    <span class="discount">0元抽奖</span>
                </a>
            </div>
            <p class="activity-more">查看更多&nbsp;&gt;</p>
        </section>
        <Footerpage></Footerpage>
    </div>
</template>

<script>
import axios from 'axios'
import Footerpage from './Footer'
export default {
    name: 'discovery',
     components: {
         Footerpage
    },
    data() {
        return {
            platform: {},
            hotfood: []
        }
    },
    methods: {
        goback () {
            history.go(-1)
        }
    },
    mounted () {
        var that = this
        axios.get('http://localhost:3000/discovery/platform', {
            params: {
                latitude: that.$store.state.str.latitude,
                longitude: that.$store.state.str.longitude
            }
        }).then(function (res) {
            that.platform = res.data
        }).catch(function (err) {
            console.log(err)
        })
        axios.get('http://localhost:3000/discovery/hotfood', {
            params: {
                latitude: that.$store.state.str.latitude,
                longitude: that.$store.state.str.longitude
            }
        }).then(function (res) {
            that.hotfood = res.data
        }).catch(function (err) {
            console.log(err)
        })
    }
}
</script>

<style lang="scss" scoped>
@import '../../static/px2rem.scss';
#discovery {
    width: 100%;
    background: #f5f5f5;
    overflow: hidden;
    header {
        height: px2rem(44);
        background: #0af;
        line-height: px2rem(44);
        text-align: center;
        width: 100%;
        position: fixed;
        z-index: 99;
        i {
            height: px2rem(44);
            width: px2rem(44);
            text-align: center;
            position: absolute;
            left: 0;
            font-size: px2rem(16);
            color: white;
        }
        span {
            font-size: px2rem(18);
            font-weight: bold;
            color: white;
        }
    }
    .entry {
        height: px2rem(173);
        background: white;
        margin-top: px2rem(44);
        .platform0 {
            height: 100%;
            width: 50%;
            padding: px2rem(24) px2rem(15) px2rem(15);
            float: left;
            box-sizing: border-box;
            border-right: px2rem(0.5) solid #ededed;
            h2 {
                font-weight: normal;
                font-size: px2rem(18);
            }
            img {
                margin: 0 auto;
                display: block;
                width: px2rem(75);
                height: px2rem(75);
                margin-top: px2rem(5);
            }
        }
        .platform1,
        .platform2 {
            float: left;
            width: 50%;
            height: 50%;
            box-sizing: border-box;
            border-bottom: px2rem(0.5) solid #ededed;
            padding: px2rem(24) px2rem(15);
            position: relative;
            p {
                float: left;
                clear: left;
            }
            h2 {
                float: left;
                font-weight: normal;
            }
            img {
                position: absolute;
                top: 25%;
                right: 10%;
                width: px2rem(45);
                height: px2rem(45);
            }
        }
        p {
            font-size: px2rem(12);
            line-height: px2rem(30);
            color: #999;
        }
    }
    .activity {
        width: 100%;
        height: px2rem(175/2);
        margin: px2rem(10) 0;
    }
    section {
        margin-bottom: px2rem(11);
        background: white;
        .activity-header {
            padding-top: px2rem(39/2);
            text-align: center;
            font-size: px2rem(18);
            font-weight: 700;
            color: #333;
            .line {
                display: inline-block;
                margin: .213333rem .093333rem .173333rem;
                border: px2rem(0.5) solid #333;
                width: px2rem(18);
                height: 0;
                position: relative;
            }
            .line.right:after {
                left: -.066667rem;
            }
            .line.left:after {
                right: -.066667rem;
            }
            .line:after {
                position: absolute;
                top: -.076667rem;
                content: "";
                background: #333;
                height: px2rem(5);
                width: px2rem(5);
                border-radius: 50%;
            }
            .activity-icon {
                position: relative;
                top: .053333rem;
                width: px2rem(15);
                height: px2rem(15);
            }
            g {
                fill: rgb(241, 44, 44);
                fill-rule: evenodd;
            }
        }
        .activity-sub-title {
            font-size: px2rem(11);
            color: #999;
            text-align: center;
            padding: px2rem(4) 0 px2rem(8);
        }
        .activity-body {
            padding: px2rem(12) 0 px2rem(15) px2rem(15);
            white-space: nowrap;
            .discover-food {
                display: inline-block;
                position: relative;
                box-sizing: border-box;
                width: px2rem(111);
                height: px2rem(333/2);
                margin-right: px2rem(6);
                img {
                    width: 100%;
                    height: px2rem(110);
                }
                .food-name {
                    font-size: px2rem(14);
                    color: #333;
                    margin: px2rem(14) 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .food-price {
                    color: #ff5339;
                    font-size: px2rem(13);
                    .original-price{
                        font-size: px2rem(12);
                        color: #aaa;
                        display: inline-block;
                    }
                }
                .discount{
                    position: absolute;
                    top: 0;
                    left: 0;
                    font-size: px2rem(12);
                    color: #fff;
                    background: #413d3c;
                    padding: px2rem(2.5);
                }
            }
        }
        .activity-more {
            font-size: px2rem(13);
            color: #999;
            text-align: center;
            padding: px2rem(3) 0 px2rem(18);
        }
    }
}
</style>
